[日本語Alexa] Alexa-SDK Ver2(その7) ディスプレイ表示

音声アシスタント特集

#Alexa SDK

#日本語

#SDK

#Amazon Alexa

#AWS

SIN

2018.05.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

本記事は、Alexa SDK for Node.js Ver2入門と題して、入門用という位置付けで、Alexa SDKの使い方を、順に紹介しているものです。（対象は、Node.js用のみです。Java用には触れておりません）

その7では、ディスプレイ表示について見ていきたいと思います。

ディスプレイ表示のためには、レスポンスでDisplayディレクティブを返すことになりますが、Alexa-SDKでは、ResponseBuilderで、これを簡単に設定できるようになっています。

なお、ディスプレイ表示に対応するには、スキルのインターフェースで　画面インターフェース を有効にする必要があります。

2 テンプレートの種類

テンプレートの種類は、画像やテキストの配置で下記の7種類が提供されています。


BodyTemplate1	BodyTemplate2	BodyTemplate3
BodyTemplate6	BodyTemplate7
ListTemplate1	ListTemplate2

各テンプレートの詳細については、公式のドキュメントをご参照下さい。
Display Interface and Template Reference

3 addRenderTemplateDirective

Alexa SDKでは、ResponseBuilderのaddRenderTemplateDirective()を使用してテンプレートを表示します。

addRenderTemplateDirective(template: interfaces.display.Template): this;

引数のinterfaces.display.Templateは、次のように、テンプレートの種類だけインターフェースが定義されていますので、これに従って値を設定する作業になります。

type Template = interfaces.display.ListTemplate2 |
                interfaces.display.ListTemplate1 | 
                interfaces.display.BodyTemplate7 | 
                interfaces.display.BodyTemplate6 | 
                interfaces.display.BodyTemplate3 | 
                interfaces.display.BodyTemplate2 | 
                interfaces.display.BodyTemplate1;
}

namespace interfaces.display {
    interface BodyTemplate1 {
        'type': 'BodyTemplate1';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'title'?: string;
        'textContent'?: interfaces.display.TextContent;
    }
    interface BodyTemplate2 {
        'type': 'BodyTemplate2';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'image'?: interfaces.display.Image;
        'title'?: string;
        'textContent'?: interfaces.display.TextContent;
    }
    interface BodyTemplate3 {
        'type': 'BodyTemplate3';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'image'?: interfaces.display.Image;
        'title'?: string;
        'textContent'?: interfaces.display.TextContent;
    }
    interface BodyTemplate6 {
        'type': 'BodyTemplate6';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'textContent'?: interfaces.display.TextContent;
        'image'?: interfaces.display.Image;
    }
    interface BodyTemplate7 {
        'type': 'BodyTemplate7';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'title'?: string;
        'image'?: interfaces.display.Image;
        'backgroundImage'?: interfaces.display.Image;
    }
    interface ListTemplate1 {
        'type': 'ListTemplate1';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'title'?: string;
        'listItems'?: Array<interfaces.display.ListItem>;
    }
    interface ListTemplate2 {
        'type': 'ListTemplate2';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'title'?: string;
        'listItems'?: Array<interfaces.display.ListItem>;
    }
}

それでは、いくつかのテンプレートをサンプルとして書いてみます。

4 BodyTemplate1

BodyTemplate1のインターフェースは下記のとおりです。

interface BodyTemplate1 {
    'type': 'BodyTemplate1';
    'token'?: string;
    'backButton'?: interfaces.display.BackButtonBehavior;
    'backgroundImage'?: interfaces.display.Image;
    'title'?: string;
    'textContent'?: interfaces.display.TextContent;
}

interfaces.display.BackButtonBehaviorは、下記のようになっていますので、どちらかを指定します。

type BackButtonBehavior = 'HIDDEN' | 'VISIBLE';

interfaces.display.Image及び、interfaces.display.TextContentについては、生成するためのヘルパー関数が利用可能です。

interfaces.display.Image

const myImage = new Alexa.ImageHelper()
    .withDescription('FooDescription')
    .addImageInstance('http://BarImageSource')
    .getImage();

interfaces.display.TextContent

const myTextContent = new Alexa.PlainTextContentHelper()
    .withPrimaryText('Foo')
    .withSecondaryText('Bar')
    .withTertiaryText('Baz')
    .getTextContent();

const myTextContent = new Alexa.RichTextContentHelper()
    .withPrimaryText('Foo')
    .withSecondaryText('Bar')
    .withTertiaryText('Baz')
    .getTextContent();

そして、実装は下記のようになりました。

const title = 'BodyTemplate1';
const backgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/BackgroundImage.jpg')
    .getImage();
const textContent = new Alexa.RichTextContentHelper()
    .withPrimaryText('PrimaryText')
    .withSecondaryText('<font size="7">SecondaryText</font>')
    .withTertiaryText('<font size="1">TertiaryText</font>')
    .getTextContent();
const token = 'TOKEN'
return handlerInput.responseBuilder
    .speak('hello')
    .addRenderTemplateDirective({
        type: 'BodyTemplate1',
        backButton: 'VISIBLE',
        backgroundImage: backgroundImage,
        title: title,
        textContent: textContent,
        token : token,
    })
    .getResponse();

5 BodyTemplate3

ほとんど、使い方は同じですが、BodyTemplate3の実装例は下記のとおりです。

BodyTemplate3では、ヒントの表示が可能ですが、こちらは、addRenderTemplateDirective()ではなく、addHintDirective()を使用します。

const title = 'BodyTemplate3';
const backgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/BackgroundImage.jpg')
    .getImage();
const forgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/ForgroundImage.jpg')
    .getImage();
const textContent = new Alexa.RichTextContentHelper()
    .withPrimaryText('PrimaryText')
    .withSecondaryText('<font size="7">SecondaryText</font>')
    .withTertiaryText('<font size="1">TertiaryText</font>')
    .getTextContent();
const token = 'TOKEN'
return handlerInput.responseBuilder
    .speak('hello')
    .addHintDirective('hint message')
    .addRenderTemplateDirective({
        type: 'BodyTemplate3',
        backButton: 'VISIBLE',
        backgroundImage: backgroundImage,
        image:  forgroundImage,
        title: title,
        textContent: textContent,
        token : token,
    })
    .getResponse();

6 ListTemplate1

ListTemplate1の場合は、interfaces.display.ListItemが使用されますが、こちらのインターフェースは下記のとおりです。

namespace interfaces.display {
    interface ListItem {
        'token': string;
        'image'?: interfaces.display.Image;
        'textContent'?: interfaces.display.TextContent;
    }
}

そして実装例です。

const title = 'ListTemplate1';
const backgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/BackgroundImage.jpg')
    .getImage();
const image = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/ForgroundImage.jpg')
    .getImage();
const textContent = new Alexa.PlainTextContentHelper()
    .withPrimaryText('PrimaryText')
    .withSecondaryText('SecondaryText')
    .withTertiaryText('TertiaryText')
    .getTextContent();
const listItem = {
    token : 'item',
    image : image,
    textContent : textContent
}

const token = 'TOKEN'
return handlerInput.responseBuilder
    .speak('hello')
    .addRenderTemplateDirective({
        type: 'ListTemplate1',
        backButton: 'HIDDEN',
        backgroundImage: backgroundImage,
        listItems:  [listItem, listItem, listItem],
        title: title,
        token : token,
    })
    .getResponse();